<template>
<div>
    <h4 @click="changeRoot">provide-inject---子组件</h4>
    <div class="provide-child">
        {{childData}}
    </div>
    <Inject/>
</div>
</template>
    
<script setup lang='ts'>
import { inject } from "@vue/runtime-core";
import Inject from "../components/inject.vue"

    let childData = inject('rootData');
    let emit = defineEmits(['my-change']);

    let changeRoot = function() {
        console.log('changeRoot');
        emit("my-change", {
            name: 'child-root',
            age: 30,
            colosrs: {
                likes: 'blue'
            }
        });
    }
</script>
<style>
    h4 {
        font-size: .16rem;
    }
    .provide-child {
        font-size: .16rem;
        width: 4rem;
        height: 3rem;
        border: .0033rem solid red;
    }
</style>